<template lang="pug">
  yd-infinitescroll(:callback="nextPage",ref="scroll")
    div(slot="list").membership-cards-records
      membership-card-record(v-for="record,i in records",:key="i" :record="record")
</template>
<script>
import _ from "lodash";
import MembershipCardRecord from '../../components/MembershipCardRecord'
export default {
  components:{
      MembershipCardRecord
  },
  data() {
    return {
      total: 0,
      page: 1,
      records: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.page = 1;
      this.$refs.scroll.$emit("ydui.infinitescroll.reInit");
      this.$api.v1
        .record_memberRecords_post({
          data: {
            uid: window.data.uid,
            rows: 10,
            page: this.page
          }
        })
        .then(res => {
          this.total = res.data.total;
          this.records = res.data.rows;
        });
    },
    nextPage() {
      if (this.total / 10 < this.page) {
        this.$refs.scroll.$emit("ydui.infinitescroll.loadedDone");
        return;
      }
      this.page += 1;
      this.$api.v1
        .record_memberRecords_post({
          data: {
            uid: window.data.uid,
            rows: 10,
            page: this.page
          }
        })
        .then(res => {
          this.records = _.concat(this.records, res.data.rows);
          this.$refs.scroll.$emit("ydui.infinitescroll.finishLoad");
        })
        .catch(() => {
          this.$refs.scroll.$emit("ydui.infinitescroll.reInit");
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
.membership-card-record {
  border-bottom: solid 1px #ccc;
  margin-bottom: .2rem;
  &:last-child{
    border-bottom-color: transparent;
    margin-bottom: 0;
  }
}
</style>
